<template>
  <div class="header">
    <div class="container">
      <div @click="goHome" class="left">
        <img src="@/assets/logo.png" class="logo" />
        <span>XBoot</span>
        <span class="blue">物料中心</span>
      </div>
      <div class="right">
        <div @click="goto('页面组件')" class="item">页面组件</div>
        <div @click="goto('页面模版')" class="item">页面模版</div>
        <div @click="goto('应用示例')" class="item">应用示例</div>
        <div @click="goto('数据大屏')" class="item">数据大屏</div>
        <a class="item" target="_blank" href="http://xboot.exrick.cn"
          >XBoot开发平台</a
        >
        <a
          href="http://xpay.exrick.cn/pay?xboot"
          target="_blank"
          class="btn-primary"
          >立即购买</a
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "header",
  data() {
    return {};
  },
  methods: {
    goHome() {
      this.$router.push({
        name: "home",
      });
    },
    goto(v) {
      this.$router.push({
        name: "list",
        query: {
          cate: v,
        },
      });
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
.header {
  height: 72px;
  width: 100%;
  display: flex;
  justify-content: center;
  background: #fff;
  //   box-shadow: 0 0 3px rgb(60 72 88 / 15%);
  position: sticky;
  top: 0;
  .container {
    width: 1140px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      font-weight: 500;
      color: #333;
      display: flex;
      align-items: center;
      font-size: 20px;
      cursor: pointer;
      .logo {
        width: 50px;
        margin-right: 10px;
      }
      .blue {
        color: #0674ec;
        margin-left: 3px;
      }
    }
    .right {
      display: flex;
      align-items: center;
      .item {
        display: flex;
        align-items: center;
        height: 72px;
        color: #333;
        font-size: 15px;
        cursor: pointer;
        margin-right: 30px;
        font-weight: 500;
        transition: 0.3s ease;
        &:hover {
          color: #0674ec;
        }
      }
      .btn-primary {
        background: #0674ec;
        font-size: 15px;
        font-weight: 500;
        color: #fff;
        transition: 0.3s ease;
        border: none;
        position: relative;
        border-radius: 100px;
        line-height: 34px;
        padding: 0 17px;
        width: 100px;
        text-align: center;
        vertical-align: middle;
        box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
        &:hover {
          background: #7347c1;
        }
      }
    }
  }
}
</style>
